 
 <template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="header">
      <h2>居民死亡医学证明（推断）书</h2>
    </div>
    <!-- 省份/城市/县区 -->
    <div class="admin-info">
      <div class="form-row">
        <div class="form-col">
         <label>行政区划代码
                     <div class="grid-container">
                       <div class="grid-item">4</div>
                       <div class="grid-item">1</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">3</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">2</div>
                     </div>
		 </label>
         <label style="float: right;">编号
                     <div class="grid-container">
                       <div class="grid-item">2</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">2</div>
                       <div class="grid-item">3</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">7</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">1</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">0</div>
                       <div class="grid-item">1</div>
                       <div class="grid-item">-</div>
                       <div class="grid-item"></div>
                       <div class="grid-item"></div>
                       <div class="grid-item"></div>
                       <div class="grid-item"></div>
                       <div class="grid-item"></div>
                     </div>
         </label>
        </div>
      </div>
    </div>
    <!-- 个人信息表格 -->
	<div class="table-wrapper">
		<div class="vertical-label">第二联  公安部门保存</div>
	<table>
      <tr>
        <th>死者姓名</th>
        <td><div class="form-field">张某某</div></td>
        <th >性别</th>
        <td ><div class="form-field">男</div></td>
        <th >民族</th>
        <td ><div class="form-field">汉</div></td>
        <th >国家或地区</th>
        <td ><div class="form-field">中国</div></td>
		<th >年龄</th>
		<td ><div class="form-field">83</div></td>
      </tr>
      <tr>
        <th>身份证件<br>类别</th>
        <td><div class="form-field">身份证</div></td>
        <th>证件号码</th>
        <td colspan="2"><div class="form-field">410302********1234</div></td>
        <th >常住地址</th>
        <td colspan="4"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
      </tr>
      <tr>
        <th>出生日期</th>
        <td ><div class="form-field">1945年3月12日</div></td>
        <th>死亡日期</th>
        <td colspan="2"><div class="form-field">2023年7月1日 10:25</div></td>
        <th>死亡地点</th>
        <td colspan="4"><div class="form-field">医疗卫生机构</div></td>
      </tr>
      <tr>
        <th>死亡原因</th>
        <td colspan="3"><div class="form-field">2023年7月1日 10:25</div></td>
        <th>家属姓名</th>
        <td colspan="2"><div class="form-field">医疗卫生机构</div></td>
        <th >联系电话</th>
        <td colspan="2"><div class="form-field">否</div></td>
      </tr>
      <tr>
        <th>家属住址或单位</th>
        <td colspan="3"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
        <th>医师签名</th>
        <td colspan="2"><div class="form-field">张大夫</div></td>
        <th>民警签名</th>
        <td colspan="2"><div class="form-field">李大夫</div></td>
      </tr>
	  <tr>
	    <td  colspan="5">
			<div class="form-field">医疗卫生机构盖章</div>
			<span class="year">年月日</span>
		</td>
	    <td colspan="5">
			<div class="form-field">派出所意见(盖章)</div>
			<span class="year">年月日</span>
		</td>
	  </tr>
    </table>
    </div>
    <!-- 备注信息 -->
    <div class="dashed-border">
      <p>注：①死者家属持此联到公安机关办理户籍注销手续；②无医师及民警签字、医疗卫生机构及派出所盖章无效。</p>
    </div>
	<!-- 第三联 -->
	<!-- 标题区域 -->
	<div class="header">
	  <h2>居民死亡医学证明（推断）书</h2>
	</div>
	<!-- 省份/城市/县区 -->
	<div class="admin-info">
	  <div class="form-row">
	    <div class="form-col">
	     <label>行政区划代码
	                 <div class="grid-container">
	                   <div class="grid-item">4</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">3</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">2</div>
	                 </div>
		 </label>
	     <label style="float: right;">编号
	                 <div class="grid-container">
	                   <div class="grid-item">2</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">2</div>
	                   <div class="grid-item">3</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">7</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">-</div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                 </div>
	     </label>
	    </div>
	  </div>
	</div>
	<!-- 个人信息表格 -->
	<div class="table-wrapper">
		<div class="vertical-label">第三联  死者家属保存</div>
	<table>
	  <tr>
	    <th>死者姓名</th>
	    <td><div class="form-field">张某某</div></td>
	    <th >性别</th>
	    <td ><div class="form-field">男</div></td>
	    <th >民族</th>
	    <td ><div class="form-field">汉</div></td>
	    <th >国家或地区</th>
	    <td ><div class="form-field">中国</div></td>
		<th >年龄</th>
		<td ><div class="form-field">83</div></td>
	  </tr>
	  <tr>
	    <th>身份证件<br>类别</th>
	    <td><div class="form-field">身份证</div></td>
	    <th>证件号码</th>
	    <td colspan="2"><div class="form-field">410302********1234</div></td>
	    <th >常住地址</th>
	    <td colspan="4"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
	  </tr>
	  <tr>
	    <th>出生日期</th>
	    <td ><div class="form-field">1945年3月12日</div></td>
	    <th>死亡日期</th>
	    <td colspan="2"><div class="form-field">2023年7月1日 10:25</div></td>
	    <th>死亡地点</th>
	    <td colspan="4"><div class="form-field">医疗卫生机构</div></td>
	  </tr>
	  <tr>
	    <th>死亡原因</th>
	    <td colspan="3"><div class="form-field">2023年7月1日 10:25</div></td>
	    <th>家属姓名</th>
	    <td colspan="2"><div class="form-field">医疗卫生机构</div></td>
	    <th >联系电话</th>
	    <td colspan="2"><div class="form-field">否</div></td>
	  </tr>
	  <tr>
	    <th>家属住址或单位</th>
	    <td colspan="3"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
	    <th>医师签名</th>
	    <td colspan="2"><div class="form-field">张大夫</div></td>
	    <th>民警签名</th>
	    <td colspan="2"><div class="form-field">李大夫</div></td>
	  </tr>
	  <tr>
	    <td  colspan="5">
			<div class="form-field">医疗卫生机构盖章</div>
			<span class="year">年月日</span>
		</td>
	    <td colspan="5">
			<div class="form-field">派出所意见(盖章)</div>
			<span class="year">年月日</span>
		</td>
	  </tr>
	</table>
	</div>
	<!-- 备注信息 -->
	<div class="dashed-border">
	  <p>注：①死者家属持此联到公安机关签章；②无医师及民警签字、医疗卫生机构及派出所盖章无效；③死于救治机构以外的死亡原因系死后推断。</p>
	</div>
	<!-- 第四联 -->
	<!-- 标题区域 -->
	<div class="header">
	  <h2>居民死亡殡葬证</h2>
	</div>
	<!-- 省份/城市/县区 -->
	<div class="admin-info">
	  <div class="form-row">
	    <div class="form-col">
	     <label>行政区划代码
	                 <div class="grid-container">
	                   <div class="grid-item">4</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">3</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">2</div>
	                 </div>
		 </label>
	     <label style="float: right;">编号
	                 <div class="grid-container">
	                   <div class="grid-item">2</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">2</div>
	                   <div class="grid-item">3</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">7</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">0</div>
	                   <div class="grid-item">1</div>
	                   <div class="grid-item">-</div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                   <div class="grid-item"></div>
	                 </div>
	     </label>
	    </div>
	  </div>
	</div>
	<!-- 个人信息表格 -->
	<div class="table-wrapper">
		<div class="vertical-label">第四联  殡葬管理部门保存</div>
	<table>
	  <tr>
	    <th>死者姓名</th>
	    <td><div class="form-field">张某某</div></td>
	    <th >性别</th>
	    <td ><div class="form-field">男</div></td>
	    <th >民族</th>
	    <td ><div class="form-field">汉</div></td>
	    <th >国家或地区</th>
	    <td ><div class="form-field">中国</div></td>
		<th >年龄</th>
		<td ><div class="form-field">83</div></td>
	  </tr>
	  <tr>
	    <th>身份证件<br>类别</th>
	    <td><div class="form-field">身份证</div></td>
	    <th>证件号码</th>
	    <td colspan="2"><div class="form-field">410302********1234</div></td>
	    <th >常住地址</th>
	    <td colspan="4"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
	  </tr>
	  <tr>
	    <th>出生日期</th>
	    <td ><div class="form-field">1945年3月12日</div></td>
	    <th>死亡日期</th>
	    <td colspan="2"><div class="form-field">2023年7月1日 10:25</div></td>
	    <th>死亡地点</th>
	    <td colspan="4"><div class="form-field">医疗卫生机构</div></td>
	  </tr>
	  <tr>
	    <th>死亡原因</th>
	    <td colspan="3"><div class="form-field">2023年7月1日 10:25</div></td>
	    <th>家属姓名</th>
	    <td colspan="2"><div class="form-field">医疗卫生机构</div></td>
	    <th >联系电话</th>
	    <td colspan="2"><div class="form-field">否</div></td>
	  </tr>
	  <tr>
	    <th>家属住址或单位</th>
	    <td colspan="3"><div class="form-field">河南省洛阳市老城区XX街道XX号</div></td>
	    <th>医师签名</th>
	    <td colspan="2"><div class="form-field">张大夫</div></td>
	    <th>民警签名</th>
	    <td colspan="2"><div class="form-field">李大夫</div></td>
	  </tr>
	  <tr>
	    <td  colspan="5">
			<div class="form-field">医疗卫生机构盖章</div>
			<span class="year">年月日</span>
		</td>
	    <td colspan="5">
			<div class="form-field">派出所意见(盖章)</div>
			<span class="year">年月日</span>
		</td>
	  </tr>
	</table>
	</div>
	<!-- 备注信息 -->
	<div>
	  <p style="font-size: 10px; padding-top: 5px;"> 注：①死者家属持此证到殡仪馆办理尸体火化手续；②死于救治机构，医师签字及医疗卫生机构盖章有效；死于非救治机构，医师及民警签字、医疗卫生机构及派出所盖章有效。</p>
	</div>
	<!-- 操作按钮 -->

    <!-- 操作按钮 -->
    <div class="controls">
      <button onclick="window.print()">打印证明书</button>
      <button onclick="clearForm()">清空表单</button>
    </div>
  </div>

</template>
  <script>
    function clearForm() {
      if(confirm('确定要清空所有表单内容吗？')) {
        document.querySelectorAll('.form-field').forEach(field => {
          field.textContent = '';
        });
      }
    }
  </script>

 <style scoped>
    /* 全局样式优化 */
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "SimSun", "宋体", serif;
       background: linear-gradient(135deg, #e0f0ff, #f5f9ff);
      color: #000;
      padding: 20px;
      line-height: 1.6;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 30px;
      position: relative;
    }
    
    /* 标题区域样式 */
    .header {
      text-align: center;
      margin-bottom:5px;
	  font-weight: bold;
    }
    
    .header h2{
      margin: 5px 0 ;
	  font-weight: bold;
	  font-size: 24px;
	  font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .title-note {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    
    /* 行政区域样式优化 */
    .admin-info {
/*      margin-bottom: 15px */;
      font-size: 12px;
    }
    
    .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .form-col {
      flex: 1;
    }
    
    .form-col label {
      display: inline-block;
    }
    
    .form-col span {
      font-weight: bold;
      display: inline-block;
      min-width: 40px;
      text-align: center;
      border-bottom: 1px solid #333;
      /* margin: 0 5px; */
      /* padding: 0 5px; */
    }
    
    /* 表格样式优化 */
    table {
      width: 100%;
      border-collapse: collapse;
      /* margin-bottom: 15px; */
      table-layout: fixed;
      font-size: 12px;
    }
    
    table, th, td {
      border: 1px solid #333;
      /* padding: 1px 5px; */
    }
    
    th {
/*      background-color: #f5f5f5 */;
      text-align: center;
      font-weight: normal;
      line-height: 1.5;
    }
    
    td {
      vertical-align: middle;
      /* line-height: 1.7; */
    }
    
    .form-field {
      min-height: 28px;
      display: flex;
      align-items: center;
      padding: 0 5px;
    }
	
	.year{
		letter-spacing: 30px;
		display: block;
		text-align: right;
	}
    
    /* 部分标题样式 */
    .section-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    
    .section-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 10%;
      width: 80%;
      height: 1px;
      background: linear-gradient(to right, transparent, #333, transparent);
    }
    
    /* 备注区域样式 */
    .notes {
      padding: 5px;
      border-bottom:1px dashed #000;
      font-size: 12px;
      line-height: 1.8;
    }
    
    .notes p {
      margin-bottom: 5px;
    }
    
    /* 按钮区域样式 */
    .controls {
      margin: 15px 0 15px;
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    
    button {
      padding: 8px 25px;
      background: #2c6aa0;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
      font-family:  "宋体", "SimSun",serif;
      transition: background 0.3s;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    }
    
    button:hover {
      background: #1a4d78;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* 打印样式优化 */
    @media print {
      body {
        padding: 0;
        background: white;
      }
      
      .container {
        box-shadow: none;
        padding: 15px;
        max-width: 100%;
      }
      
      .controls {
        display: none;
      }
      
      button {
        display: none;
      }
      
      .notes {
        border: none;
        background-color: transparent;
        padding: 5px 0;
      }
    }
    
    /* 移动端适配 */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .form-row {
        flex-direction: column;
      }
      
      .controls {
        flex-direction: column;
        align-items: center;
      }
    }
    
    /* 特殊单元格样式 */
    .signature-area {
      padding: 10px;
      min-height: 80px;
    }
    
    .signature-line {
      float: right;
      padding: 0px 20px 0 0;
    }
    
    /* 增强可读性 */
    tr:nth-child(even) {
      /* background-color: #fafafa; */
    }
    
    td:empty::after {
      content: " ";
      display: inline-block;
      width: 100%;
    }
	/* 新增：第一联标签样式 */
	    .vertical-label {
	      position: absolute;
	      left: -20px;
	      top: 50%;
	      transform: translateY(-50%);
	      writing-mode: vertical-lr;
	      text-orientation: upright;
	      font-size: 12px;
	      white-space: nowrap;
		  letter-spacing: 5px;
		  
	    }
	    
	    /* 新增：表格容器样式 */
	    .table-wrapper {
	      position: relative;
	      margin-top: 5px;
	    }
		/* 新增：格子样式 */
		    .grid-container {
		      display: inline-flex;
		      gap: 2px;
		      margin-left: 5px;
		      vertical-align: middle;
		    }
		    
		    .grid-item {
		      width: 15px;
		      height: 15px;
		      border: 1px solid #aaa;
		      text-align: center;
		      line-height: 15px;
		      display: inline-block;
		    }
			.dashed-border {
				font-size: 10px;
			  padding: 5px; /* 为底部边框留出空间 */
			  border-bottom: 1px dashed #000;
			}
	
  </style>
